$(function () {
  // 1.初始化富文本
  initEditor()

  // 2.初始化文章类别
  initArticleCate()
  function initArticleCate() {
    axios({
      method: "get",
      url: "/my/article/cates",
    }).then(({ data: res }) => {
      // 失败提示
      if (res.status != 0) {
        return layer.msg(res.message)
      }
      // 渲染
      let arr = ['<option value="">请选择文章所属的分类</option>']
      res.data.forEach((ele) => {
        arr.push(`
          <option value="${ele.Id}">${ele.name}</option>
        `)
      })
      $('[name="cate_id"]').empty().html(arr.join(""))
      layui.form.render()
    })
  }

  // 3.获取图片
  // 3.1. 初始化图片裁剪器
  var $image = $("#image")
  // 3.2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: ".img-preview",
  }
  // 3.3. 初始化裁剪区域
  $image.cropper(options)
  // 3.4选择封面
  $("#chooseImgBtn").on("click", function () {
    $("#chooseImgInp").click()
  })
  // 3.5 修改文章封面
  $("#chooseImgInp").on("change", function () {
    if (this.files.length > 0) {
      // 3.1) 找到文件对象
      var fileObj = this.files[0]
      // 3.2) 创建url
      var url = URL.createObjectURL(fileObj)
      // 3.3) 更换图片
      $image.cropper("replace", url)
    }
  })

  // 4.表单提交
  $("#formPub").on("submit", function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.append("state", state)
    // fd对象中，有content，但是值为空； 根本就没有 图片
    // 1. 获取富文本编辑器里面的内容，并不是追加到fd中，而是更改fd里面的内容
    fd.set("content", tinyMCE.activeEditor.getContent())
    // 2. 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
    var canvas = $image.cropper("getCroppedCanvas", {
      width: 400,
      height: 280,
    })
    // 把canvas图片转成二进制形式
    canvas.toBlob(function (blob) {
      fd.append("cover_img", blob)
      // 打印一下fd，查看是否含有所有数据
      // console.log(...fd)
      axios({
        method: "post",
        url: "/my/article/add",
        data: fd,
      }).then(({ data: res }) => {
        // 失败提示
        if (res.status != 0) {
          return layer.msg(res.message)
        }
        // 成功提示
        layer.msg(res.message)
        // 表单清空
        $("#formPub")[0].reset()
        // 跳转到文章页
        window.parent.document.querySelector(".art_list").click()
      })
    })
  })

  // 5.获取文章发布状态
  // 状态，可选值为：已发布、草稿
  let state = ""
  $("#toSubmit").on("click", function () {
    state = "已发布"
  })
  $("#toDraft").on("click", function () {
    state = "草稿"
  })
})
